<template>
    <div class="gamed">
        <span>
            <svg data-v-d6903dc1="" t="1718879121239" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="25319" width="40" height="40">
                <path data-v-d6903dc1=""
                    d="M679.408 689.376c-24.032-28.336-89.52-94.8-175.104-94.8-67.008 0-115.28 38.064-142.48 67.312a581.184 581.184 0 0 1-24.976 31.824l-0.752 1.216-1.76 1.744c-46.96 54.784-100.112 93.6-145.152 86.48-103.04-16.32-92.4-222.112-48.8-358.8s99.296-179.84 184.496-166.352c4.768 0.752 9.456 1.76 14.064 2.992 68.992 10.224 86.304 27.712 165.36 27.712 77.488 0 150.832-22.48 176.88-28.048 4.128-1.088 8.336-1.984 12.624-2.656 85.216-13.488 140.896 29.648 184.496 166.352 43.6 136.704 54.24 342.48-48.8 358.8-43.072 6.816-92.608-27.808-136.896-78.112-1.072-1.024-2.16-2.048-3.232-3.104 0 0-1.632-2.288-4.752-6.208a525.808 525.808 0 0 1-5.216-6.352zM297.52 513.312a78.64 78.64 0 1 0 0-157.28 78.64 78.64 0 0 0 0 157.28z"
                    fill="#95EAFF" p-id="25320"></path>
                <path data-v-d6903dc1=""
                    d="M314.112 170.912h-68.816c-36.208 0-67.632 20.288-67.632 49.376v44.496h32v-44.496c0-7.744 14.928-17.376 35.632-17.376h68.816c20.72 0 35.632 9.648 35.632 17.376v44.496h32v-44.496c0-29.056-31.392-49.376-67.632-49.376zM674.272 220.24c0-7.76 14.928-17.408 35.632-17.408h68.816c20.72 0 35.632 9.648 35.632 17.408v44.528h32v-44.528c0-29.072-31.392-49.408-67.632-49.408h-68.816c-36.208 0-67.632 20.304-67.632 49.408v44.528h32v-44.528z"
                    fill="#49A3FE" p-id="25321"></path>
                <path data-v-d6903dc1="" d="M752 384m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#49A3FE"
                    p-id="25322"></path>
                <path data-v-d6903dc1="" d="M688 448m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#49A3FE"
                    p-id="25323"></path>
                <path data-v-d6903dc1="" d="M816 448m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#49A3FE"
                    p-id="25324"></path>
                <path data-v-d6903dc1="" d="M752 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#49A3FE"
                    p-id="25325"></path>
                <path data-v-d6903dc1=""
                    d="M589.824 544h-52.768a16 16 0 0 0 0 32h52.768a16 16 0 0 0 0-32zM468.928 544H416a16 16 0 0 0 0 32h52.928a16 16 0 0 0 0-32z"
                    fill="#49A3FE" p-id="25326"></path>
                <path data-v-d6903dc1=""
                    d="M937.2 423.568c-49.6-155.488-116.8-214.112-224.224-197.104-5.312 0.848-10.544 1.936-15.712 3.296-2.864 0.592-45.072 11.072-62.304 14.848-46.848 10.24-89.888 16.016-131.568 16.016-40.24 0-65.04-3.536-99.536-12.416-3.088-0.8-20.128-5.296-25.312-6.608a549.52 549.52 0 0 0-57.696-11.776 170.336 170.336 0 0 0-15.76-3.36c-107.408-17.008-174.624 41.6-224.224 197.104C17.952 620.832 31.92 827.344 148.24 845.76c53.808 8.528 115.744-30.608 177.088-102.16a18.24 18.24 0 0 0 3.584-4.208l-0.032-0.016a666.384 666.384 0 0 0 27.168-34.608c39.824-42.64 89.184-69.824 147.344-69.824 71.088 0 134.8 42.704 183.76 100.432 1.76 2.176 3.76 4.608 5.776 7.008 2.192 2.752 3.808 4.912 4.544 5.952l1.904 2.208 3.76 3.616c56.752 64.56 114.992 99.792 166.704 91.6 116.32-18.416 130.288-224.928 67.36-422.192z m-72.352 390.592c-37.856 6-87.488-24.016-138.688-82.192a356.768 356.768 0 0 0-3.568-3.488 194.144 194.144 0 0 0-4.88-6.336c-2.128-2.56-4.032-4.848-5.92-7.184-54.688-64.48-125.584-112.016-208.4-112.016-68.528 0-125.76 31.616-171.168 80.432a717.28 717.28 0 0 1-28.464 36.176l-1.168 1.584-0.624 0.608c-55.696 64.88-109.168 98.672-148.736 92.4-86.544-13.712-99.2-201.12-41.872-380.864 45.312-142.048 99.536-189.344 188.72-175.216 4.752 0.752 9.456 1.76 14.08 3.008 21.12 3.232 37.232 6.624 56.464 11.536 5.008 1.28 22 5.76 25.232 6.592 36.96 9.52 64.384 13.44 107.52 13.44 44.32 0 89.504-6.08 138.4-16.768 17.84-3.904 59.968-14.352 62.896-14.992 4.848-1.264 9.04-2.144 13.28-2.816 89.184-14.128 143.424 33.168 188.72 175.216 57.376 179.76 44.704 367.168-41.824 380.88z"
                    fill="#0F13AE" p-id="25327"></path>
                <path data-v-d6903dc1=""
                    d="M863.616 728.88a44.16 44.16 0 0 1-15.648 5.536 50.08 50.08 0 0 1-20.976-1.488c-23.376-6.24-50.88-26.848-78.704-58.448-1.248-1.248-2-1.968-2.64-2.592a146.368 146.368 0 0 0-3.536-4.576l-4.432-5.376a16 16 0 1 0-24.848 20.144c1.504 1.856 3.008 3.68 4.512 5.472 1.52 1.92 2.688 3.456 3.2 4.176l1.904 2.208c0.944 0.928 1.904 1.824 2.848 2.72 30.592 34.864 62.816 58.976 93.456 67.168a82.128 82.128 0 0 0 34.24 2.176 75.904 75.904 0 0 0 26.896-9.568 16 16 0 1 0-16.272-27.552zM282.672 666.064c-0.432 0.576-0.32 0.448-0.448 0.576a351.184 351.184 0 0 1-33.504 34.368c-28.416 24.992-54.112 36.528-73.872 33.392a43.632 43.632 0 0 1-22.416-10.432 16 16 0 0 0-21.056 24.096 75.648 75.648 0 0 0 38.448 17.936c31.168 4.944 65.152-10.304 100.016-40.976a364.992 364.992 0 0 0 35.712-36.544 23.84 23.84 0 0 0 2.784-3.328 16 16 0 1 0-25.664-19.088z"
                    fill="#0F13AE" p-id="25328"></path>
                <path data-v-d6903dc1=""
                    d="M689.28 641.232m-17.232 0a17.232 17.232 0 1 0 34.464 0 17.232 17.232 0 1 0-34.464 0Z"
                    fill="#0F13AE" p-id="25329"></path>
                <path data-v-d6903dc1=""
                    d="M113.28 689.232m-17.232 0a17.232 17.232 0 1 0 34.464 0 17.232 17.232 0 1 0-34.464 0Z"
                    fill="#0F13AE" p-id="25330"></path>
                <path data-v-d6903dc1=""
                    d="M294.4 419.2V400a16 16 0 0 0-32 0v19.2H240a16 16 0 0 0 0 32h22.4V480a16 16 0 0 0 32 0v-28.8H320a16 16 0 0 0 0-32h-25.6z"
                    fill="#0F13AE" p-id="25331"></path>
                <path data-v-d6903dc1=""
                    d="M280 336a104 104 0 1 0 0 208 104 104 0 0 0 0-208z m0 176a72 72 0 1 1 0-144 72 72 0 0 1 0 144z"
                    fill="#0F13AE" p-id="25332"></path>
            </svg>
        </span>
        <div class="userCenter_title">{{ $t('recently_play') }}</div>
        <div class="gamed_main">
            <div class="gamed_main_item" v-for="item in userPlayList" :key="item.id" @click="open_game(item.id,item.pixel_code)">
                <img width="80" :src="$baseUrl+item.icon" alt="">
                <p>{{ item.title }}</p>
            </div>

            <p class="isNull isNull_notext" v-if="userPlayList.length == 0">{{ $t('empty') }}</p>
            
            <div v-if="userPlayList.length !== 0" class="card-action" :class="{ show: $route.path === '/userCenter/Gamed' }">
                <div class="btn-more">
                    <a target="_blank" style="cursor: pointer;">
                        <span class="btn-text" @click="$router.push('/userCenter/Gamed')">{{ $t('more') }}</span>
                        <span class="iconfont">></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import axios from '@/utils/api'
import { reactive } from "vue";
import { useUserInfoStore } from '@/store/modules/user_info/index';
import { useRouter,useRoute } from 'vue-router'
import {useGetGameUrl} from '@/hooks/getGameUrl'
const router = useRouter()
const route = useRoute()

const user_infoStore = useUserInfoStore();
const user_info = reactive(user_infoStore.userInfo)

const userPlayList = reactive([])
const getUserPlayList = async () =>{
    let list = []
    // if(route.path === '/userCenter/Gamed'){
    //     list = await axios.get('/getUserPlayList?user_id='+user_info.id)
    // }else{
    //     list = await axios.get('/getUserPlayList?user_id='+user_info.id+'&limit=6')
    // }
    list = await axios.get('/getUserPlayList?user_id='+user_info.id)
    Object.assign(userPlayList,list.data)
    console.log(userPlayList);
}
getUserPlayList()

const open_game = async (game_id,pixel_code) => {
    const data = await useGetGameUrl(game_id,user_info.id)
    console.log(data,'data');
    if(data.code == 5002 || data.code == 5003 || data.message == 'Token失效'){
        // router.push('/login')
        return
    }

    // localStorage.setItem('game_url',data.game_url)
    const url = router.resolve({ path: '/playgame',query: { id: game_id,game_name: data.game_name,pixel_code } }).href;
    window.open(url)
    
}
</script>

<style lang="less" scoped>
.isNull_notext {
    margin: 0 auto;
}
.gamed {
    margin-top: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, .16);
    padding-bottom: 20px;
    .gamed_main {
        flex-wrap: wrap;
        display: flex;
        .gamed_main_item {
            cursor: pointer;
            margin-left: 0;
            margin-right: 30px;
            margin-top: 20px;
            img{
                border-radius: 15px;
            }
            p {
                width: 80px;
                font-size: 15px;
                // padding: 0 4px;
                min-height: 24px;
                max-height: 48px;
                color: rgba(0, 0, 0, .85);
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                white-space: normal;
                word-break: break-all;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                text-align: center;
                margin-top: 2px;
            }
            
        }
        .show{
            display: none;
        }
        .card-action {
            margin-right: 0;
            .btn-more:hover{
                background-color: #f3f3f3;
                
            }
            .btn-more {
                width: 54px;
                height: 22px;
                line-height: 24px;
                color: rgba(0, 0, 0, .6);
                border-radius: 6px;
                border: 1px solid #ced3de;
                border: 1px solid #dadee6;
                a {
                    display: flex;
                    height: 100%;
                    line-height: 22px;
                    justify-content: center;
                    align-items: center;
                    color: rgba(0, 0, 0, .6);
                    margin-right: 4px;
                    .btn-text {
                        margin: 0 2px 0 10px;
                        font-size: 12px;
                    }
                    .iconfont {
                        transform: scaleY(1.3);
                        position: relative;
                        top: -1.5px;
                        opacity: 0.8;
                    }
                }
                
            }
        }
    }
}
</style>